<template>
	<view>
		<!-- 搜索 -->
		<uni-search-bar placeholder="请输入您要查找的机构" cancelText="搜索" radius="30" bgColor="#FAFAFA" borderColor="#FAFAFA" @cancel="cancel"  @confirm="confirm" />
		<view class="nav">
			<picker :value="pickerList[index].num" :range="pickerList[index].list" @change="bindPickerChangeText(index, $event)" v-for="(item, index) in navList"
				:key="index" :class="(index == 0 && provinec_id) || (index == 1 && city_id) || (index == 2 && area_id) ? 'changeClass' : ''">
				<text>{{ item }}</text>
				<i class="iconfont iconxiala"></i>
			</picker>
		</view>
		<view class="cont">
			<view @click="gotodetail(index)" class="schoolItem" v-for="(item, index) in schoolList" :key="index">
				<view class="schoolInfo">
					<image :src="item.avatar ? item.avatar : defImg" mode="aspectFit"></image>
					<view class="topInfo">
						<view class="name">{{ item.nickname }}</view>
						<view class="infos">
							<view>
								<!-- <text>{{ item.score }}分</text> -->
								<view>{{ item.advisory_num }}人咨询</view>
							</view>
							<view v-if="longitude && latitude && item.distance!=null">{{ item.distance }}km</view>
						</view>
					</view>
				</view>
				<view class="area">校区：{{ item.address }}</view>
				<view class="imgs" v-if="item.scenery_list"><image v-if="imgIndex <= 2" :src="img.simgurl" v-for="(img, imgIndex) in item.scenery_list" :key="imgIndex"></image></view>
				<view class="tips">
					<view class="tip">课</view>
					<view class="tips-list">
						<view class="tipList" v-for="(tip, tipIndex) in item.label_list" :key="tipIndex">{{ tip.label_name }}</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="schoolList.length>2" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
import cityData from '@/components/mpvue-citypicker/city-data/city.js';
import areaData from '@/components/mpvue-citypicker/city-data/area.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		mpvuePicker,
		uniLoadMore
	},
	data() {
		return {
			navList: [], //顶部选项卡
			provinec_id: uni.getStorageSync('userInfo').provinec_id,
			city_id: uni.getStorageSync('userInfo').city_id,
			area_id: uni.getStorageSync('userInfo').area_id,
			pickerList: [{ num: 0, list: [] }, { num: 0, list: [] }, { num: 0, list: [] }],
			defImg: this.defimg,
			schoolList: [],
			school_label_id: '',
			schoolName: '',
			latitude: '',
			longitude: '',
			page: 1,
			reload: true,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: '没数据'
			},
			users_type:''
		};
	},
	onLoad(e) {
		this.users_type=e.users_type;
		this.school_label_id = e.school_label_id;
	},
	onShow() {
		this.reload = true;
		this.page = 1;
		this.schoolList = [];
		var that = this;
		uni.getLocation({
			type: 'wgs84',
			geocode: true, //设置该参数为true可直接获取经纬度及城市信息
			success: function(res) {
				that.longitude = res.longitude;
				that.latitude = res.latitude;
				that.request();
				that.getlist();
			},
			fail: function() {
				that.request();
				that.getlist();
			}
		});
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page = 1;
		this.getlist();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function() {
			_this.getlist();
		}, 500);
	},
	methods: {
		gotodetail:function(index){
			uni.navigateTo({
				url:'schoolPage?detail='+encodeURIComponent(JSON.stringify(this.schoolList[index]).replace(/%/g, '%25'))+'&users_type='+this.users_type
			})
		},
		getlist() {
			var data = {
				school_label_id: this.school_label_id,
				page: this.page,
				pagesize: 3
			};
			if (this.provinec_id) {
				data.provinec_id = this.provinec_id;
			}
			if (this.city_id) {
				data.city_id = this.city_id;
			}
			if (this.area_id) {
				data.area_id = this.area_id;
			}
			if (this.longitude) {
				data.longitude = this.longitude;
			}
			if (this.latitude) {
				data.latitude = this.latitude;
			}
			if (this.schoolName) {
				data.nickname = this.schoolName;
			}
			this.$zapi.apiPost('user/shakeschool.Lists/schoollist', data).then(res => {
				if (res.data.code == 200) {
					var list = res.data.data.data;
					this.schoolList = this.reload ? list : this.schoolList.concat(list);
					this.reload = false;
					this.status = 'more';
				} else {
					if (this.reload) {
						this.schoolList = [];
					} else {
						this.status = 'noMore';
					}
				}
			});
		},
		cancel(e){
			this.schoolName='';
			this.reload = true;
			this.page = 1;
			this.getlist();
		},
		// 搜索
		confirm(e) {
			this.schoolName = e.value;
			if(this.schoolName){
				this.reload = true;
				this.page = 1;
				this.getlist();
			}else{
				uni.showToast({
					title: '请输入机构名称再搜索',
					icon:'none'
				});
			}
			
		},
		/* 省市区选择 */
		bindPickerChangeText(index, e) {
			this.pickerList[index].num = e.detail.value;
			this.navList[index] = e.detail.value;
			switch (index) {
				case 0:
					this.navList[0] = provinceData[this.pickerList[0].num].label;
					this.provinec_id = provinceData[this.pickerList[0].num].value;
					this.city_id = '';
					this.area_id = '';
					break;
				case 1:
					this.navList[1] = cityData[this.pickerList[0].num][this.pickerList[1].num].label;
					this.city_id = cityData[this.pickerList[0].num][this.pickerList[1].num].value;
					this.area_id = '';
					break;
				case 2:
					this.navList[2] = areaData[this.pickerList[0].num][this.pickerList[1].num][this.pickerList[2].num].label;
					this.area_id = areaData[this.pickerList[0].num][this.pickerList[1].num][this.pickerList[2].num].value;
					break;
				default:
					break;
			}
			this.request();
			this.reload = true;
			this.page = 1;
			this.getlist();
		},
		/* 查询当前省市区名称 */
		request() {
			var label = ''; // 省份名称
			var city_label = ''; //城市名称
			var area_label = ''; //区域/县名称
			this.pickerList = [{ num: 0, list: [] }, { num: 0, list: [] }, { num: 0, list: [] }];
			provinceData.forEach((pro, pIndex) => {
				this.pickerList[0].list.push(pro['label']);
				if (pro.value == this.provinec_id) {
					label = pro.label;
					this.pickerList[0].num = pIndex;
					cityData[pIndex].forEach((city, cIndex) => {
						this.pickerList[1].list.push(city['label']);
						if (!this.city_id) {
							//如果city_id为空，城市&区域/县默认取第一个数组里面的数据
							city_label = cityData[pIndex][0].label;
							this.pickerList[1].num = 0;
							areaData[pIndex][0].forEach((area, aIndex) => {
								this.pickerList[2].list.push(area['label']);
								area_label = areaData[pIndex][0][0].label;
								this.pickerList[2].num = 0;
							});
						} else {
							if (city.value == this.city_id) {
								city_label = city.label;
								this.pickerList[1].num = cIndex;
								areaData[pIndex][cIndex].forEach((area, aIndex) => {
									this.pickerList[2].list.push(area['label']);
									if (!this.area_id) {
										//如果area_id为空，区域/县默认取第一个数组里面的数据
										area_label = areaData[pIndex][cIndex][0].label;
										this.pickerList[2].num = 0;
									} else {
										if (area.value == this.area_id) {
											area_label = area.label;
											this.pickerList[2].num = aIndex;
										}
									}
								});
							}
						}
					});
				}
			});
			this.navList = [label, city_label, area_label];
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fafafa;
}
/* 省市区 */
.nav {
	position: fixed;
	left: 0;
	top: 130upx;
	z-index: 999;
	width: 100%;
	height: 80upx;
	margin: auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #FFFFFF;
	border-top: 32upx solid #FAFAFA;
	/* #ifdef APP-PLUS */
	top: 100upx;
	/* #endif */
	/* #ifdef H5 */
	top: 188upx;
	/* #endif */
	& view {
		color: #333333;
		font-size: 26upx;
		display: flex;
		align-items: center;
	}
	.changeClass {
		color: #FF9900;
	}
}
/* 列表 */
.cont {
	margin: 232upx 30upx 50upx;
}
.schoolItem {
	margin: 20upx auto 10upx;
	padding: 40upx 20upx 30upx;
	background-color: #fff;
	border-radius: 20upx;
	.schoolInfo {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		& image {
			width: 104upx;
			height: 104upx;
			border-radius: 50%;
			margin-right: 16upx;
			border: 1upx solid #efefef;
		}
		.topInfo {
			width: calc(100% - 104upx);
			.name {
				color: #333333;
				font-size: 36upx;
			}
			.infos {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #666666;
				font-size: 22upx;
				& view {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					& text {
						color: #ff7171;
						margin-right: 20upx;
					}
				}
			}
		}
	}
	.area {
		color: #999999;
		font-size: 22upx;
		margin-top: 10upx;
	}
	.imgs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20upx;
		& image {
			width: 33%;
			height: 120upx;
			border-radius: 20upx;
			margin-bottom: 20upx;
		}
	}
	.tips {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin-top: 10upx;
		.tip {
			color: #FFFFFF;
			text-align: center;
			height: 24upx;
			line-height:24upx;
			padding: 6upx;
			font-size: 22upx;
			background-color: #FF9900;
			border-radius: 4upx;
		}
		.tips-list{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			.tipList {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				color: #666666;
				font-size: 26upx;
				margin: 0 30upx 0 10upx;
				white-space: nowrap;
				line-height: 1.5;
			}
		}
	}
}
</style>
